<template>
  <div class="select">
    <form id="form_zmpm">
    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th class="td_name1">号码</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">号码</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">号码</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">号码</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">号码</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

      </tr>

      <tr v-for="item in 10">
        <th class="td_name"><span class="round bgRed">{{item}}</span></th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" :name='zmpmNum + item' @blur='addCount' /></td>

        <th class="td_name"><span class="round bg1">{{item + 10}}</span></th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" :name='zmpmNum + (item + sum10)' @blur='addCount' /></td>

        <th class="td_name"><span class="round bgGreen">{{item + 20}}</span></th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" :name='zmpmNum + (item + sum20)' @blur='addCount' /></td>

        <th class="td_name"><span class="round bgRed">{{item + 30}}</span></th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" :name='zmpmNum + (item + sum30)' @blur='addCount' /></td>

        <th class="td_name" v-show="item !=10"><span class="round bg1">{{item + 40}}</span></th>
        <td class="td_time" v-show="item !=10">11.1</td>
        <td class="td_amount" v-show="item !=10"><input type="number" :name='zmpmNum + (item + sum40)' @blur='addCount' /></td>

      </tr>

    </table>
    
    <!--<table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th class="td_name1">玩法</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">玩法</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">玩法</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">玩法</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

        <th class="td_name1">玩法</th>
        <td class="td_time1">赔率</td>
        <td class="td_amount1">金额</td>

      </tr>
      <tr>
        <th class="td_name">特大</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="teda" @blur='addCount' /></td>

        <th class="td_name">特单</th>
        <td class="td_time">11.2</td>
        <td class="td_amount"><input type="number" name="tedan" @blur='addCount' /></td>

        <th class="td_name">合大</th>
        <td class="td_time">11.3</td>
        <td class="td_amount"><input type="number" name="heda" @blur='addCount' /></td>


        <th class="td_name">合单</th>
        <td class="td_time">11.4</td>
        <td class="td_amount"><input type="number" name="hedan" @blur='addCount' /></td>
        
        <th class="td_name">特尾大</th>
        <td class="td_time">11.5</td>
        <td class="td_amount"><input type="number" name="teweida" @blur='addCount' /></td>

      </tr>
      <tr>
        <th class="td_name">特小</th>
        <td class="td_time">12.1</td>
        <td class="td_amount"><input type="number" name="texiao" @blur='addCount' /></td>

        <th class="td_name">特双</th>
        <td class="td_time">12.2</td>
        <td class="td_amount"><input type="number" name="teshuang" @blur='addCount' /></td>

        <th class="td_name">合小</th>
        <td class="td_time">12.3</td>
        <td class="td_amount"><input type="number" name="hexiao" @blur='addCount' /></td>


        <th class="td_name">合双</th>
        <td class="td_time">12.3</td>
        <td class="td_amount"><input type="number" name="heshuang" @blur='addCount' /></td>
        
        <th class="td_name">特尾小</th>
        <td class="td_time">12.4</td>
        <td class="td_amount"><input type="number" name="teweixiao" @blur='addCount' /></td>

      </tr>

      <tr>
        <th class="td_name">大单</th>
        <td class="td_time">13.1</td>
        <td class="td_amount"><input type="number" name="dadan" @blur='addCount' /></td>

        <th class="td_name">大双</th>
        <td class="td_time">13.2</td>
        <td class="td_amount"><input type="number" name="dashuang" @blur='addCount' /></td>

        <th class="td_name">小单</th>
        <td class="td_time">13.3</td>
        <td class="td_amount"><input type="number" name="xiaodan" @blur='addCount' /></td>


        <th class="td_name">小双</th>
        <td class="td_time">13.4</td>
        <td class="td_amount"><input type="number" name="xiaoshuang" @blur='addCount' /></td>
        
        <th class="td_name">特尾大</th>
        <td class="td_time">11.1</td>
        <td class="td_amount"><input type="number" name="amount"/></td>
      </tr>

    </table>-->
    </form>
    <div class="bottom">
      总金额共{{ count }}元
      <el-button type="warning" @click="addTouzhu">添加投注</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
    	<div class="dialogCgj">
    		<h3 class="red">你确定要加入{{ caipiaoTerm }}期吗？</h3>
    		<ul>
    			<li v-for="(item, index) in params">
    				<div class="flex"><span style="white-space: nowrap;">
            					号码：</span><span class="red single_ellipsis">{{item.number}} 号</span> 赔率：
    					</span><span class="red single_ellipsis">{{item.peilv}}</span> 金额：
    					</span><span class="red single_ellipsis">{{item.amount}} 元</span>
    				</div>
    			</li>
    		</ul>
    		总金额：<span class="red">{{ count }} 元</span>
    	</div>
    	<span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消投注</el-button>
                <el-button type="primary" @click="addSendData">确定投注</el-button>
              </span>
    </el-dialog>
  </div>
</template>

<script>
  import $ from 'jquery'
  import addCount from '../../../../../../assets/js/hallCount.js'
  import lhcTouZhu from '../../../../../../assets/js/lhcTouZhu.js'
  
  export default {
  	props: ['caipiaoTerm'],
    data () {
      return {
      	zmpmNum: 'zmpmNum',
      	sum10: 10,
      	sum20: 20,
      	sum30: 30,
      	sum40: 40,
      	count: 0,
      	form: [],
      	eleForm: '#form_zmpm',
      	params: [],
      	gameType: 15,
      	ticketId: 20
      }
    },
    methods: {
      addTouzhu () {
      	this.params = []
      	let str = $('#form_zmpm').serialize()
      	this.form = str.split('&')
      	this.params = lhcTouZhu(this.form, this.gameType, this.caipiaoTerm, this.ticketId)
      	console.log(this.params)
      	this.centerDialogVisible = true
      },
      addCount () {
        this.count = addCount(this.eleForm)
      },
      addSendData () {
      	this.centerDialogVisible = false
      	this.params.forEach((item, index) => {
      		let params2 = {}
      		params2.lhcCalls = []
      		params2.lhcCalls.push(item)
      		this.$api.lhc_call_call(item).then((res) => {
	      		console.log(res)
	      		if(res.code == "000000") {
	      			this.$message.success('投注成功')
	      		}
	      	})
      	})
      }
    }

  }
  
</script>

<style lang="less" scoped>
  @import "../../../style/game";

  .td_name {
    text-align: center;
  }

  .round {
    margin-left: 10px;
  }
</style>
